import Qt 4.7

Rectangle {
    id: box

    width: 145; height: 40
    radius: 5;
    clip: true;
    state: 'normal'
    border { width: 3; color: box.color }
    color: "transparent"

    property int normalWidth: 145
    property int extendedWidth: 285
    property int fontPointSize: 6
    property bool rowVisible: true
    property alias model: listBox.model
    property alias rowPosX: imgRow.x
    property alias rowTextX: helper.x
    property alias idSelected: listBox.selectedId
    property alias textSelected: helper.text
    property alias allowCreate: listBox.allowCreate
    property alias internalWidth: listBox.width
    property alias internalListWidth: listBox.internalWidth

    signal itemSelected
    signal callUpdateCategories

    Image {
        id: imgRow
        x: 120; y: 20;
        source: "../resources/pixmaps/seta4.png"
        visible: box.rowVisible && box.state == "normal"
    }
    Rectangle {
        id: helper

        width: 176; height: 50
        color: "transparent"

        property string text: ""

        Text {
            id: selectedItemText

            anchors.fill: parent;
            horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter
            text: helper.text; color: "#00adef"
            font { family: "Series 60 Sans"; pointSize: box.fontPointSize; weight: Font.DemiBold }
        }
    }
    AdvancedDropDownListBox {
        id: listBox

        opacity: 0

        onItemSelected: {
            console.debug('QML:AdvancedDropDown - gotitem');
            box.state = 'normal';
            helper.text = listBox.selectedText;
            //box.textSelected = listBox.selectedText;
            box.itemSelected();
        }
        onNewCategory: helper2.opacity = 1
    }
    MouseArea {
        id: boxMouseArea
        enabled: box.state == 'normal'
        width: 176; height: 50
        onClicked: box.state = 'extended'
    }
    Rectangle {
        id: helper2

        x: 145; y: 24; width: 125; height: 90
        color: "transparent"; opacity: 0

        Behavior on opacity { NumberAnimation { duration: 300 } }

        function addNewCategory() {
            var newName = newCategoryLineEdit.text;
            console.debug("QML:AdvancedDropDown - adding Category: " + newName);
            box.model = daoManager.addCategory(newName);
            helper2.opacity = 0;
            box.callUpdateCategories();
        }

        LineEdit {
            id: newCategoryLineEdit

            width: 124; height: 52
        }

        Button {
            id: cancelButton
            y: 52; width: 73; height: 43

            text: "Cancelar"; textColor: "#00adef"
            noBox: true; color: "transparent"

            onClicked: helper2.opacity = 0
        }

        Button {
            id: okButton

            x: 76; y: 52; width: 48; height: 43
            text: "OK"; textColor: "#00adef"
            noBox: true; color: "transparent"

            onClicked: {
                helper2.addNewCategory();
            }
        }
    }
    states: [
        State {
            name: "normal"

            PropertyChanges {
                target: box;
                width: box.normalWidth; height: 50
                color: "transparent"
            }

            PropertyChanges {
                target: listBox;
                opacity: 0;
            }

            PropertyChanges {
                target: boxMouseArea;
                width: 145; height: 40
            }
        },
        State {
            name: "extended"

            PropertyChanges {
                target: box;
                width: box.extendedWidth; height: 166
                color: "#333132"
            }

            PropertyChanges {
                target: listBox;
                opacity: 1;
            }

            PropertyChanges {
                target: boxMouseArea;
                width: 0; height: 0
            }
        }
    ]
    transitions: [
        Transition {
            from: "normal"
            to: "extended"

            SequentialAnimation {

                ParallelAnimation {

                    NumberAnimation {
                        properties: "width,height"
                        duration: 300
                    }

                    ColorAnimation {
                        from: "transparent";
                        to: "#333132";
                        duration: 300 }
                }

                NumberAnimation {
                    properties: "opacity"
                    duration: 300
                }
            }

        },
        Transition {
            from: "extended"
            to: "normal"

            SequentialAnimation {

                NumberAnimation {
                    properties: "opacity"
                    duration: 300
                }

                ParallelAnimation {

                    NumberAnimation {
                        properties: "width,height"
                        duration: 300
                    }

                    ColorAnimation {
                        from: "#333132";
                        to: "transparent";
                        duration: 300
                    }
                }
            }
        }
    ]
}
